<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="挂号信息"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<pBox :search="true"></pBox>
			<view class="">
				<view class="dawn-wrap tn-margin-top-sm">
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">就诊人</view>
						</view>
						<view class="list__right list__right__text">
							{{ patientInfo.name  || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">就诊人ID</view>
						</view>
						<view class="list__right list__right__text">
							{{ patientInfo.patientId  || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">门诊号</view>
						</view>
						<view class="list__right list__right__text">
							{{ patientInfo.clinicNo  || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">挂号科室</view>
						</view>
						<view class="list__right list__right__text">
							{{orderInfo.departmentName || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">挂号医生</view>
						</view>
						<view class="list__right list__right__text">
							{{orderInfo.doctorName || '-' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">就诊日期</view>
						</view>
						<view class="list__right list__right__text">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__4">{{orderInfo.searchDate || '' }}</tn-tag>
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">就诊时间段</view>
						</view>
						<view class="list__right list__right__text">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__1">{{orderInfo.scheduleTime || '' }}</tn-tag>
						</view>
					</view>

					<view class="list-icon-text">
						<view class="list__left">
							<view class="">余号</view>
						</view>
						<view class="list__right list__right__text">
							{{orderInfo.limitCount || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<view class="">挂号金额</view>
						</view>
						<view class="list__right dawn-text-lg tn-color-red--dark">
							¥ {{orderInfo.cost || '' }}
						</view>
					</view>
				</view>

				<!-- 悬浮按钮-->
				<view class="tn-margin tn-text-center tn-flex tn-flex-row-center">
					<tn-button @click="onShowBox()" class="dawn-btn-lg dawn-btn-lg__main">
						<text class="tn-icon-mouse-fill tn-padding-right-xs"></text>
						<text>确认挂号</text>
					</tn-button>
				</view>

				<view v-if="articleInfo.id" class="tn-bg-white dawn-radius dawn-shadow tn-margin-top-sm">
					<view class="list-icon-text">
						<view class="list__left">
							<image v-if="articleInfo.coverImg" style="height: 50rpx;width: 50rpx;"
								:src="articleInfo.coverImg" mode="aspectFit">
							</image>
							<view class="list__left__text tn-margin-left-ss">{{ articleInfo.title || '就诊须知' }}</view>
						</view>
					</view>
					<view>
						<scroll-view scroll-y="true">
							<view class='conters'>
								<parser :html="articleInfo.content" ref="article"></parser>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>


		<tn-popup v-model="showBox" mode="center" width="90%" :borderRadius="borderRadius">
			<view class="content">
				<tn-list-cell>
					<view class="tn-text-center">
						<text class="dawn-text-lg dawn-color">{{ articleInfo.title || '就诊须知' }}</text>
					</view>
				</tn-list-cell>
				<scroll-view scroll-y="true">
					<view class='conters'>
						<parser :html="articleInfo.content" ref="article"></parser>
					</view>
				</scroll-view>
				<view
					class="tn-flex tn-flex-row-center tn-flex-col-center tn-width-full tn-padding-top tn-padding-bottom">
					<tn-button @click="onCreateOrder()" class="dawn-btn-lg dawn-btn-lg__info">
						<text class="tn-icon-check tn-padding-right-xs"></text>
						<text>我已阅读并同意</text>
					</tn-button>
				</view>
			</view>
		</tn-popup>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as RegisterApi from "@/api/hospital/register.js";
	import * as PatientApi from '@/api/hospital/patient.js';
	import * as ArticleApi from '@/api/cms/article.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				borderRadius: 40,
				loading: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				articleInfo: {},
				showBox: false,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '',
					patientName: '',
					departmentId: ''
				},
				status: -1,
				orderInfo: {},
				list: []
			}
		},
		onLoad(options) {
			console.info("query onLoad")
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				let that = this;
				this.orderInfo = this.$util.getStorageData(config.STORE_KEY.REG_SOURCE);
				console.table(that.orderInfo);
				that.updateClinicNo(that.patientInfo);
				that.getData();

				if (options.hasOwnProperty('params')) {
					let params = JSON.parse(options.params);
					this.orderInfo = params;
					this.orderInfo.doctorSpan = undefined;
					// if(this.patientInfo.cardNo === '532901199012183230' || this.patientInfo.cardNo === '530322199401051052'){
					// 	this.orderInfo.cost = '1';
					// }
					// if(this.patientInfo.name === '何霖'){
					// 	this.orderInfo.cost = 1;
					// }
					// if(this.patientInfo.name === '杨玉华'){
					// 	this.orderInfo.cost = 1;
					// }
					this.updateClinicNo(this.patientInfo);
					this.getData();
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			toCreate(item) {
				let params = JSON.parse(options.params);
				uni.navigateTo({
					url: '/hosp/order/info?params=' + JSON.stringify(item)
				})
			},
			getData() {
				let that = this;
				this.loading = true;
				ArticleApi.getArticlePage({
					categoryKey: config.CMS_TYPE.REG_TIPS
				}).then(res => {
					that.loading = false;
					if (res.code === 0) {
						const l = res.data.list || [];
						if (l.length > 0) {
							that.$set(this, 'articleInfo', l[0]);
						}
					}
				});
			},
			onShowBox() {
				if (this.articleInfo.id) {
					this.showBox = true;
				} else {
					this.onCreateOrder();
				}
			},
			updateClinicNo(item) {
				let that = this;
				if (!item.clinicNo || item.clinicNo === '' || item.clinicNo === null) {
					PatientApi.updateClinicNo({
						"id": item.id,
						"wxUserId": this.uid,
						"openid": item.openid,
						"patientId": item.patientId,
						"cardNo": item.cardNo,
						"patientName": item.name
					}).then(res => {
						console.table(res);
						if (res.code === 0) {
							this.patientInfo = res.data;
							that.$store.commit("UPDATE_PATIENTINFO", res.data);
						}
					});
				}
			},
			onCreateOrder: function() {
				console.table(this.orderInfo);
				let that = this;
				this.showBox = false;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';

				if (this.orderInfo.dayparting === '1') {
					RegisterApi.sourceCheck({
						"patientId": this.patientInfo.patientId,
						"patientName": this.patientInfo.name,
						"regDate": this.orderInfo.searchDate,
						"departmentId": this.orderInfo.departmentId,
						"doctorId": this.orderInfo.doctorId,
						"number": this.orderInfo.number,
						"scheduleTime": this.orderInfo.scheduleTime,
					}).then(res => {
						console.table(res);
						that.loading = false;
						if (res.code === 0) {
							that.toCreateOrder();
						} else {
							that.show = true;
							that.msg = res.msg;
						}
					}).catch(err => {
						that.loading = false;
						that.show = true;
						that.msg = res.message;
					})
				} else {
					that.toCreateOrder();
				}
			},
			toCreateOrder: function() {
				console.table(this.orderInfo);
				let that = this;
				this.showBox = false;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';

				let scheduleTimeStar = this.orderInfo.scheduleTime;
				if (scheduleTimeStar != '') {
					scheduleTimeStar = scheduleTimeStar.substring(0, 5);
				}

				RegisterApi.createOrder({
					"orderName": '预约挂号',
					"pid": this.patientInfo.id,
					"userId": this.patientInfo.openid,
					"openid": this.patientInfo.openid,
					"patientId": this.patientInfo.patientId,
					"patientName": this.patientInfo.name,
					"cardNo": this.patientInfo.cardNo,
					"clinicNo": this.patientInfo.clinicNo,
					"regDate": this.orderInfo.searchDate,
					"regTypeId": this.orderInfo.projectId,
					"regType": this.orderInfo.projectName,
					"departmentId": this.orderInfo.departmentId,
					"departmentName": this.orderInfo.departmentName,
					"doctorId": this.orderInfo.doctorId,
					"doctorName": this.orderInfo.doctorName,
					"totalCost": this.orderInfo.cost,
					"number": this.orderInfo.number,
					"clinicId": this.orderInfo?.clinicId,
					"scheduleName": this.orderInfo.timeName,
					"sequence": this.orderInfo.sequence,
					"scheduleTime": this.orderInfo.scheduleTime,
					"scheduleTimeStar": scheduleTimeStar,
					"address": this.orderInfo.address,
				}).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						if (that.orderInfo.cost > 0) {
							// uni.navigateTo({
							// 	url: '/hosp/order/info?orderNumber=' + res.data.orderNumber
							// })
							that.toPayUI(res.data.orderNumber);
						} else {
							that.onConfirmOrder(res.data.orderNumber);
						}
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
					that.msg = res.message;
				})
			},
			onConfirmOrder: function(orderNumber) {
				let that = this;
				this.showBox = false;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';
				RegisterApi.freeOrder({
					"orderNumber": orderNumber,
					"patientId": this.patientInfo.id,
					"totalCost": this.orderInfo.cost,
					"userId": this.patientInfo.openid,
					"openid": this.patientInfo.openid,
					"patientId": this.patientInfo.patientId,
					"patientName": this.patientInfo.name,
					"thirdOrderNo": orderNumber,
					"payInfo": '免费',
				}).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						that.$util.Tips({
							title: '挂号成功'
						});
						uni.navigateTo({
							url: '/hosp/order/detail?orderNumber=' + orderNumber
						})
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
					that.msg = res.message;
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		padding: 0rpx 20rpx;
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 15rpx;
		border-bottom: 1px solid $dawn-line-color;
	}

	::v-deep .tn-index-list__sidebar {
		right: 20rpx;
	}

	::v-deep .tn-index-list__sidebar__item {
		font-size: $dawn-font-size-xl;
	}

	::v-deep .tn-index-anchor {
		font-size: $dawn-font-size-md;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		color: #080808;
		font-weight: bolder;
		line-height: 1.2;
		background-color: $dawn-page-bg;
	}

	::v-deep .tn-index-anchor--active {
		color: #080808;
	}
</style>